<template>
    <!--地图组件-->
    <div class="map-view" id="map_container">
        <MyChart
            ref="mapChart"
            width="100%" height="100%"
            :option="option"
        />
    </div>
</template>

<script>
    import * as echarts from 'echarts/core';
    import chinaGeoJson from '@/datas/100000_full.json';

    import MyChart from "../../charts/MyChart";
    export default {
        name: "MapView",
        components: {MyChart},
        data() {
            return {
                option: null,
            }
        },
        created(){
            this.initGeoJsonData();
        },
        mounted(){

        },
        methods: {
            // 初始化地图geo json数据
            initGeoJsonData(){
                // 注册地图
                echarts.registerMap('geo_100000', chinaGeoJson);
                this.initData();
            },
            // 初始化展示数据
            initData(){
                const option = {
                    title: {
                        text: null,
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: (params)=>{
                            console.log("--params", params);
                            if (params.componentSubType !== 'effectScatter') {
                                return null;
                            }
                            let name = params.name;
                            return  `<div>${name} <div>用户数量：888</div></div>`;
                        },
                    },
                    geo: {
                        map: 'geo_100000',
                        zlevel: 1,
                        show:true,
                        layoutCenter: ['50%', '70%'],
                        roam: true,
                        layoutSize: "100%",
                        zoom: 1.0,
                        label: {
                            normal: {
                                show: true,
                                textStyle:{
                                    fontSize:12,
                                    color: '#43D0D6',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        itemStyle: {
                            areaColor: 'rgba(8,89,130,0.8)',
                        },
                        emphasis: {
                            label:{
                                show: true,
                                fontWeight: 'bold',
                                color: '#ffffff',
                            },
                            itemStyle: {
                                areaColor: 'rgba(1,97,216,0.8)',
                            },
                        }
                    },
                };

                const series = [
                    {
                        type:'effectScatter',
                        coordinateSystem: 'geo',
                        zlevel: 15,
                        symbolSize:12,
                        rippleEffect: {
                            period: 4, brushType: 'stroke', scale: 4
                        },
                        itemStyle:{
                            color:'#FFB800',
                            opacity:1
                        },
                        data: [
                            { name: '北京', value: [116.405285,39.904989], label: '1'},
                            { name: '广西', value: [108.350354,22.81904] },
                            { name: '广东', value: [113.252396,23.136106] },
                            { name: '衢州', value: [118.621146,29.058418] },
                        ]
                    },

                    {
                        type:'lines',
                        coordinateSystem:'geo',
                        zlevel: 15,
                        polyline: false,
                        effect: {
                            show: true, period: 2, trailLength: 0.2, symbol: 'arrow',  color:'#01AAED',symbolSize: 8,
                        },
                        lineStyle: {
                            color: '#FFB800',
                            width: 1.2,
                            opacity: 0.6,
                            curveness: 0.6,
                        },
                        data: [
                            {
                                coords: [
                                    [116.405285,39.904989],
                                    [108.350354,22.81904],
                                ],

                            },
                            {
                                coords: [
                                    [108.350354,22.81904],
                                    [113.252396,23.136106]
                                ],
                            },
                            {
                                coords: [
                                    [113.252396,23.136106],
                                    [118.621146,29.058418],
                                ],
                            }
                        ]
                    }
                ];

                option.series = series;

                this.option = option;
            },

        },
    }
</script>

<style scoped>
    .map-view{
        width: 100%;
        height: 100%;
        min-width: 300px;
        min-height: 300px;
        margin: 0 auto;
    }
</style>
